<template>
  <view v-if="pictures && pictures.length" class="home-banner-wrapper">
    <swiper 
      class="home-banner image-with-placeholder" 
      interval="3000" 
      autoplay
      @change="currentChange">

      <swiper-item class="swiper-item" v-for="(picture, index) in pictures" :key="index" @tap="handleClick(picture)" >
        <image class="swiper-image image-with-placeholder" :src="picture.imgUrl" mode="aspectFill"/>
        <!-- 删除按钮 -->
        <!-- <text class="delete-icon" @click.native.stop="deleteBanner" >
            <basic-icons name="icon-cancel" size="30rpx" padding="10rpx" color="#ffffff" />          
        </text> -->
      </swiper-item>
    </swiper>

    <!-- 指示点 -->
    <view class="indicator-dots">
      <span 
        class="indicator-dot" 
        v-for="(item, index) in pictures" 
        :key="index" 
        :class="[activeIndex === index ? 'active' : '']" />
    </view>
  </view>
</template>
<script>
  import sdk from 'sdk'
  import storage from 'utils/helper/storage'
  export default {
    name: 'home-banner',

    props: {
      pictures: {
        type: Array,
        default: () => []
      }
    },

    data() {
      return {
        // showBanner: true,

        activeIndex: 0
      }
    },

    methods: {
      // deleteBanner() {
      //   this.showBanner = false
      // },
      currentChange(e) {
        let {current} = e.detail || {}
        this.activeIndex = current
      },
      handleClick(item) {
        // window.location.href = item.forwardUrl
        // #ifdef MP
        storage.set('sdk_open_webview', item.forwardUrl)
        sdk.navigateTo({url: '/pages/webview/index'})
        // #endif

        // #ifndef MP
        sdk.navigateTo({url: item.forwardUrl})
        // #endif
      }
    }
  }
</script>
<style lang="less">
.home-banner-wrapper {
  position: relative;
  border-radius: 10rpx;

  .home-banner {
    border-radius: 10rpx;
    overflow: hidden;
    height: 130rpx;
    transform: translateY(0); // 使轮播的圆角生效
  }

  .swiper-item {
    position: relative;
  }

  .swiper-image {
    width: 100%;
    height: 100%;
  }
  
  .delete-icon {
    position: absolute;
    right: 0;
    top: 0;

    background-color: rgba(0, 0, 0, 0.4);
    border-bottom-left-radius: 20rpx;
  }

  .indicator-dots {
    position: absolute;
    right: 10rpx;
    bottom: 14rpx;
    font-size: 0;
    z-index: 2;

    .indicator-dot {
      font-size: 0;
      border: 4rpx solid rgba(255,255,255, 0.4);
      border-radius: 100%;
      margin: 4rpx;

      &.active {
        border-color: #ffffff;
      }
    }
  }
}
</style>